* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes newBox {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}

@keyframes flare {
  0% {
    color: white;
  }
  50% {
    color: yellow;
  }
  100% {
    color: white;
  }
}

@keyframes shake {
  @sL: 5px;
  0% {
    transform: translateX(0px) translateY(-@sL);
  }
  33% {
    transform: translateX(@sL) translateY(0);
  }
  66% {
    transform: translateX(0) translateY(@sL);
  }
  100% {
    transform: translateX(-@sL) translateY(0);
  }
}

// 全局盒子闪烁
@keyframes flash {
  from {
    background-color: red;
    box-shadow: yellow 0 0 30px;
  }
  to {
    background-color: transparent;
    box-shadow: none;
  }
}

@keyframes boom {
  0% {
    transform: scale(1.5);
    background-color: red;
    box-shadow: yellow 0 0 30px;
  }
  25% {
    transform: translateY(10px) translateX(20px);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
    background-color: transparent;
    box-shadow: none;
  }
}

// 合并进来的盒子
@keyframes merged {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {

  main {
    width: 90%;
    margin: 0 auto;
    min-height: 100vh;
    background-color: lightslategray;

    .gameRange {
      outline: solid 1px;
      padding: 5px;
      overflow: scroll;

      p {
        background-color: darkslategray;
        color: whitesmoke;
        text-align: center;
        font-size: 20px;

        #score {
          color: red;
          font-weight: bolder;
        }
      }
    }

    .gameBoard {

      //outline: solid 1px;
      margin: 30px auto;
      // fx
      //animation-name: rotate;
      animation-duration: 1s;
      animation-iteration-count: 1;
      //transform-origin: left top;
      //transition: all 1s;

      //animation-iteration-count: 1;

      .line {
        height: @L;
        margin-top: @m;
      }
    }
  }
}


@L: 50px;
@m: 5px;
.box {
  height: @L;
  width: @L;
  margin-right: @m;
  //outline: solid 1px;
  float: left;

  border-radius: 10px;
  font-weight: bolder;
  font-size: 20px;
  line-height: @L;
  text-align: center;
  border: solid 1px;
  background-color: gray;

  user-select: none;
  //animation: newBox 1s;
}

.undefinedBox {
  color: black;
  outline: none;
  border: none;
  background-color: orangered;
  font-size: 9px;
  box-shadow: red 0 0 20px;
  animation-name: shake;
  animation-iteration-count: infinite;
  animation-duration: 0.2s;
}

.InfBox {
  color: white;
  background-color: black;
  border-radius: 50%;
  outline: none;
  border: none;
  animation-name: rotate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  box-shadow: black 0 0 50px;
  text-shadow: white 0 0 5px;
  font-size: 25px;
}

.NaNBox {
  color: black;
  background-color: transparent;
}

.nullBox {
  filter: blur(1px);
  //background-color: transparent;
  animation-name: flare;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: linear;
  background-color: black;
  transform: scale(0.5);
  //color: white;
}

.clearFloat {
  float: none;
}
